<template>
  <BasicModal @register="registerModal" title="JAVA增强" :width="1200" defaultFullscreen :cancel="onCancel">
    <template #footer>
      <a-button @click="onCancel">关闭</a-button>
      <div v-if="aiTestMode" key="0" style="float: 'left'">
        <a-button @click="onGenEnhanceJavaData">生成测试数据</a-button>
      </div>
    </template>
    <template #default>
      <BasicTable @register="registerTable" :rowSelection="rowSelection">
        <template #tableTitle>
          <a-button type="primary" preIcon="ant-design:plus" @click="onAdd">新增</a-button>
          <a-dropdown v-if="selectedRowKeys.length > 0">
            <template #overlay>
              <a-menu>
                <a-menu-item @click="onBatchDelete"> <a-icon type="delete" />删除 </a-menu-item>
              </a-menu>
            </template>
            <template #default>
              <a-button style="margin-left: 8px" @click="onCancel">批量操作<a-icon type="down" /></a-button>
            </template>
          </a-dropdown>
        </template>
        <template #action="{ record }">
          <TableAction stopButtonPropagation :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
        </template>
      </BasicTable>
      <BasicModal v-bind="formModalProps">
        <a-spin :spinning="formModalProps.confirmLoading">
          <BasicForm @register="registerForm" />
        </a-spin>
      </BasicModal>
    </template>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive, computed, nextTick } from 'vue';
  import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form';
  import { BasicTable, TableAction } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { useOnlineTest } from '../../use/useOnlineTest';
  import { useJavaFormSchemas, useJavaColumns } from './enhance.data';
  import { getEnhanceJavaByCode, saveEnhanceJava, doEnhanceJavaBatchDelete } from './enhance.api';

  export default defineComponent({
    name: 'EnhanceJavaModal',
    components: { BasicModal, BasicTable, BasicForm, TableAction },
    emits: ['register'],
    setup() {
      const code = ref('');
      const btnList = ref([]);
      const { columns } = useJavaColumns(btnList);
      const { doRequest, doDeleteRecord, tableContext } = useListPage({
        tableProps: {
          api: async (params) => {
            let { dataSource, btnList: $btnList } = await getEnhanceJavaByCode(code.value, params);
            btnList.value = $btnList;
            return dataSource;
          },
          columns,
          canResize: false,
          useSearchForm: false,
          beforeFetch(params) {
            return Object.assign(params, { column: 'orderNum', order: 'asc' });
          },
        },
      });
      const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
      const [registerModal, { closeModal }] = useModalInner(async (data) => {
        code.value = data.row.id;
        reload();
      });
      const { aiTestMode, genEnhanceJavaData } = useOnlineTest();
      const [registerFormModal, formModal] = useModal();
      const isUpdate = ref(false);
      const formModalProps = reactive({
        onRegister: registerFormModal,
        title: computed(() => ((isUpdate.value == null ? void 0 : isUpdate.value) ? '修改' : '新增')),
        width: 800,
        confirmLoading: false,
        bodyStyle: { height: '350px' },
        onOk: onSubmit,
        onCancel: formModal.closeModal,
      });
      let formRecord = {};
      const { formSchemas } = useJavaFormSchemas(btnList);
      const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
        schemas: formSchemas,
        showActionButtonGroup: false,
      });
      function onCancel() {
        closeModal();
      }
      async function openFormModal(data) {
        var _a;
        isUpdate.value = data.isUpdate;
        formRecord = Object.assign({}, (_a = data.record) != null ? _a : {});
        formModal.openModal();
        await nextTick();
        await resetFields();
        setFieldsValue(formRecord);
      }
      function onAdd() {
        openFormModal({ isUpdate: false });
      }
      function onEdit(record) {
        openFormModal({ isUpdate: true, record });
      }
      function onGenEnhanceJavaData() {
        genEnhanceJavaData(code.value);
      }
      async function onBatchDelete() {
        doRequest(() => doEnhanceJavaBatchDelete(selectedRowKeys.value));
      }
      async function onSubmit() {
        try {
          formModalProps.confirmLoading = true;
          let values = await validate();
          values = Object.assign({}, formRecord, values);
          await saveEnhanceJava(code.value, values, isUpdate.value);
          reload();
          formModal.closeModal();
        } finally {
          formModalProps.confirmLoading = false;
        }
      }
      function getTableAction(record) {
        return [
          {
            label: '编辑',
            onClick: () => onEdit(record),
          },
        ];
      }
      function getDropDownAction(record) {
        return [
          {
            label: '删除',
            popConfirm: {
              title: '确定删除吗？',
              placement: 'left',
              confirm: () => doDeleteRecord(() => doEnhanceJavaBatchDelete([record.id])),
            },
          },
        ];
      }
      return {
        rowSelection,
        selectedRowKeys,
        aiTestMode,
        onCancel,
        onAdd,
        onGenEnhanceJavaData,
        onBatchDelete,
        getTableAction,
        getDropDownAction,
        formModalProps,
        registerModal,
        registerTable,
        registerForm,
      };
    },
    computed: {
      tableScroll() {
        let height = window.innerHeight;
        return {
          y: height - 320,
        };
      },
    },
  });
</script>
<style scoped></style>
